<template>
  <el-dialog
    :visible="value"
    :before-close="cancel"
    width="60%"
    class="recharge-limit-bank-view"
  >
    <template slot="title">
      设置银行卡限额
    </template>
    <div class="body-view">
      <el-table
        ref="multipleTable"
        :data="bankCardList"
        style="width: 100%; max-height: 400px; overflow-y: scroll;"
      >
        <el-table-column
          label="勾选启用"
          width="100"
          align="center"
        >
          <template slot-scope="{row}">
            <el-checkbox v-model="row.checked"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          label="银行名称"
          width="180"
          prop="bankName"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="最低金额"
          align="center"
        >
          <template slot-scope="{row, $index}">
            <el-input-number
              v-model="row.minAmount"
              :precision="2"
              controls-position="right"
              :step="100"
              :min="0"
              @change="handleAmount(row, $index, true)"
            >
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="最高金额"
          align="center"
        >
          <template slot-scope="{row, $index}">
            <el-input-number
              v-model="row.maxAmount"
              :precision="2"
              controls-position="right"
              :step="100"
              :min="0"
              @change="handleAmount(row, $index, false)"
            >
            </el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="footer-view"
        v-html="footText"
      >
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button
        @click="cancel"
      >
        取 消
      </el-button>
      <el-button
        type="primary"
        :loading="loading"
        :disabled="!checkedList.length"
        @click="doSave({action: 'saveForm'})"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

// services
import { getRechargeBankLimitList, addRechargeBankLimit } from '@/services/api/recharge';

// mixins
import { form, grid } from '@/build';

export default {
  name: 'recharge-limit-bank-dialog',
  props: {
    rowData: {
      type: Object,
      required: true,
      default: () => {},
    },
    value: {
      type: Boolean,
      default: true,
    },
    footText: {
      type: String,
      default: '注1：“设置银行卡限额”优先级高于“网银支付”，若是“设置银行卡限额”没有配置则取“网银支付”配置的最高/最低配置\n'
        + '<br/>注2：勾选启用后最低金额/最高金额才会正式生效',
    },
  },
  mixins: [form, grid],
  data() {
    return {
      bankCardList: [],
    };
  },
  computed: {
    channelId() {
      return this.rowData.channelId || '';
    },
    checkedList() {
      return this.bankCardList.filter(item => item.checked) || [];
    },
  },
  methods: {
    cancel() {
      this.$emit('input', false);
    },
    handleAmount(row, index, isMin = true) {
      const bankLen = this.bankCardList.length;
      if (index > bankLen) return;
      const { minAmount, maxAmount } = this.bankCardList[index];
      if (minAmount < maxAmount) return;
      // handle mix
      if (isMin) {
        this.bankCardList[index].maxAmount = minAmount + 100;
        return;
      }
      // handle max
      this.bankCardList[index].minAmount = maxAmount - 100;
    },
  },
  mounted() {
    this.bindGet(getRechargeBankLimitList, 'bankCardList', {
      sendingData: {
        channelId: this.channelId,
      },
      format: (data) => {
        if (!(Array.isArray(data) && data.length)) return [];
        return data.map((item) => {
          if (!item.minAmount) {
            item.minAmount = 0;
          }
          if (!item.maxAmount) {
            item.maxAmount = 0;
          }
          if (item.status === 0) {
            item.checked = true;
          }
          return item;
        });
      },
    });
    this.bindSave(addRechargeBankLimit, 'saveForm', 'form', {
      beforeSend: () => {
        const bankList = this.checkedList.map(item => ({
          paybankId: item.paybankId,
          status: item.status,
          minAmount: item.minAmount || 0,
          maxAmount: item.maxAmount || 0,
        }));
        return {
          bankList,
        };
      },
      afterSuccess: () => {
        this.$emit('input', false);
        this.$parent.gridSearch();
      },
    });
    this.getAll();
  },
};
</script>

<style lang="scss">
  .recharge-limit-bank-view {
    .footer-view {
      padding-top: 25px;
      color: #999999;
      font-size: 12px;
    }
  }
</style>
